<template>
    <div class="addEdit-block" :style='{"padding":"30px"}' style="width: 100%;">
        <el-form
                :style='{"padding":"30px","boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.3020)","borderRadius":"6px","background":"rgba(255, 255, 255, 0.8)"}'
                class="add-update-preview"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="140px"
        >
            <template>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="input"
                              v-if="type!='info'" label="线路名称" prop="linename">
                    <el-input v-model="ruleForm.linename" placeholder="线路名称" clearable
                              :readonly="ro.linename"></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="线路名称" prop="linename">
                    <el-input v-model="ruleForm.linename" placeholder="线路名称" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="upload"
                              v-if="type!='info' && !ro.lineimage" label="线路图片" prop="lineimage">
                    <file-upload
                            tip="点击上传线路图片"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.lineimage?ruleForm.lineimage:''"
                            @change="lineimageUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="upload"
                              v-else-if="ruleForm.lineimage" label="线路图片" prop="lineimage">
                    <img v-if="ruleForm.lineimage.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;"
                         v-bind:key="index" :src="ruleForm.lineimage.split(',')[0]" width="100" height="100">
                    <img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index"
                         v-for="(item,index) in ruleForm.lineimage.split(',')" :src="$base.url+item" width="100"
                         height="100">
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="select"
                              v-if="type!='info'" label="线路类型" prop="routetype">
                    <el-select :disabled="ro.routetype" v-model="ruleForm.routetype" placeholder="请选择线路类型">
                        <el-option
                                v-for="(item,index) in routetypeOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="线路类型" prop="routetype">
                    <el-input v-model="ruleForm.routetype"
                              placeholder="线路类型" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="input"
                              v-if="type!='info'" label="出发地" prop="departureplace">
                    <el-input v-model="ruleForm.departureplace" placeholder="出发地" clearable
                              :readonly="ro.departureplace"></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="出发地" prop="departureplace">
                    <el-input v-model="ruleForm.departureplace" placeholder="出发地" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="input"
                              v-if="type!='info'" label="目的地" prop="destination">
                    <el-input v-model="ruleForm.destination" placeholder="目的地" clearable
                              :readonly="ro.destination"></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="目的地" prop="destination">
                    <el-input v-model="ruleForm.destination" placeholder="目的地" readonly></el-input>
                </el-form-item>


                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="input" v-if="type!='info'"  label="价格" prop="jine">
                    <el-input v-model="ruleForm.jine" placeholder="价格" clearable  :readonly="ro.jine"></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else class="input" label="价格" prop="jine">
                    <el-input v-model="ruleForm.jine" placeholder="价格" readonly></el-input>
                </el-form-item>

                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="select"
                              v-if="type!='info'" label="出行时间" prop="traveltime">
                    <el-select :disabled="ro.traveltime" v-model="ruleForm.traveltime" placeholder="请选择出行时间">
                        <el-option
                                v-for="(item,index) in traveltimeOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="出行时间" prop="traveltime">
                    <el-input v-model="ruleForm.traveltime"
                              placeholder="出行时间" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="select"
                              v-if="type!='info'" label="出行天数" prop="traveldays">
                    <el-select :disabled="ro.traveldays" v-model="ruleForm.traveldays" placeholder="请选择出行天数">
                        <el-option
                                v-for="(item,index) in traveldaysOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="出行天数" prop="traveldays">
                    <el-input v-model="ruleForm.traveldays"
                              placeholder="出行天数" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="select"
                              v-if="type!='info'" label="交通工具" prop="transportation">
                    <el-select :disabled="ro.transportation" v-model="ruleForm.transportation" placeholder="请选择交通工具">
                        <el-option
                                v-for="(item,index) in transportationOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="交通工具" prop="transportation">
                    <el-input v-model="ruleForm.transportation"
                              placeholder="交通工具" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="select"
                              v-if="type!='info'" label="途径景点" prop="routeattraction">
                    <el-select :disabled="ro.routeattraction" v-model="ruleForm.routeattraction" placeholder="请选择途径景点"
                               multiple>
                        <el-option
                                v-for="(item,index) in routeattractionOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="途径景点" prop="routeattraction">
                    <el-input v-model="ruleForm.routeattraction"
                              placeholder="途径景点" readonly></el-input>
                </el-form-item>


                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="input"
                              v-if="type!='info'" label="账号" prop="account">
                    <el-input v-model="ruleForm.account" placeholder="账号" clearable
                              :readonly="ro.account"></el-input>
                </el-form-item>
                <el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
                              class="input" label="账号" prop="account">
                    <el-input v-model="ruleForm.account" placeholder="账号" readonly></el-input>
                </el-form-item>

				<el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' class="input"
							  v-if="type!='info'" label="姓名" prop="name">
					<el-input v-model="ruleForm.name" placeholder="姓名" clearable
							  :readonly="ro.name"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"100%","margin":"0 0 20px 0","display":"inline-block"}' v-else
							  class="input" label="姓名" prop="name">
					<el-input v-model="ruleForm.name" placeholder="姓名" readonly></el-input>
				</el-form-item>
            </template>

            <el-form-item :style='{"padding":"0","margin":"0"}' class="btn">
                <el-button
                        :style='{"border":"1px solid #65bbd2","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"#333","borderRadius":"4px","background":"linear-gradient(180deg, #219EBF 0%, rgba(130,189,204,0) 53%, #249FC0 100%)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                        v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交
                </el-button>
                <el-button
                        :style='{"border":"1px solid #65bbd2","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#333","borderRadius":"4px","background":"linear-gradient(180deg, #219EBF 0%, rgba(130,189,204,0) 53%, #249FC0 100%)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                        v-if="type!='info'" class="btn-close" @click="back()">取消
                </el-button>
                <el-button
                        :style='{"border":"1px solid #65bbd2","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#333","borderRadius":"4px","background":"linear-gradient(180deg, #219EBF 0%, rgba(130,189,204,0) 53%, #249FC0 100%)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                        v-if="type=='info'" class="btn-close" @click="back()">返回
                </el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
    // 数字，邮件，手机，url，身份证校验
    import {isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard} from "@/utils/validate";

    export default {
        data() {
            let self = this
            var validateIdCard = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!checkIdCard(value)) {
                    callback(new Error("请输入正确的身份证号码"));
                } else {
                    callback();
                }
            };
            var validateUrl = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isURL(value)) {
                    callback(new Error("请输入正确的URL地址"));
                } else {
                    callback();
                }
            };
            var validateMobile = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isMobile(value)) {
                    callback(new Error("请输入正确的手机号码"));
                } else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isPhone(value)) {
                    callback(new Error("请输入正确的电话号码"));
                } else {
                    callback();
                }
            };
            var validateEmail = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isEmail(value)) {
                    callback(new Error("请输入正确的邮箱地址"));
                } else {
                    callback();
                }
            };
            var validateNumber = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isNumber(value)) {
                    callback(new Error("请输入数字"));
                } else {
                    callback();
                }
            };
            var validateIntNumber = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isIntNumer(value)) {
                    callback(new Error("请输入整数"));
                } else {
                    callback();
                }
            };
            return {
                id: '',
                type: '',


                ro: {
                    linename: false,
                    lineimage: false,
                    routetype: false,
                    departureplace: false,
                    destination: false,
                    traveltime: false,
                    traveldays: false,
                    transportation: false,
                    routeattraction: false,
                    details: false,
                    releasedate: false,
                },


                ruleForm: {
                    linename: '',
                    lineimage: '',
                    routetype: '',
                    departureplace: '',
					name: '',
					account: '',
                    destination: '',
                    traveltime: '',
                    traveldays: '',
                    transportation: '',
                    routeattraction: [],
                    details: '',
                    releasedate: '',
                },

                routetypeOptions: [],
                traveltimeOptions: [],
                traveldaysOptions: [],
                transportationOptions: [],
                routeattractionOptions: [],

                rules: {
                    linename: [
                        {required: true, message: '线路名称不能为空', trigger: 'blur'},
                    ],
                    lineimage: [],
                    routetype: [
                        {required: true, message: '线路类型不能为空', trigger: 'blur'},
                    ],
                    departureplace: [],
                    destination: [],
                    traveltime: [
                        {required: true, message: '出行时间不能为空', trigger: 'blur'},
                    ],
                    traveldays: [
                        {required: true, message: '出行天数不能为空', trigger: 'blur'},
                    ],
                    transportation: [],
                    routeattraction: [],
                    details: [],
                    releasedate: [],
                }
            };
        },
        props: ["parent"],
        computed: {},
        components: {},
        created() {
            this.ruleForm.releasedate = this.getCurDate()
        },
        methods: {

            // 下载
            download(file) {
                window.open(`${file}`)
            },
            // 初始化
            init(id, type) {
                if (id) {
                    this.id = id;
                    this.type = type;
                }
                if (this.type == 'info' || this.type == 'else') {
                    this.info(id);
                } else if (this.type == 'logistics') {
                    this.logistics = false;
                    this.info(id);
                } else if (this.type == 'cross') {
                    var obj = this.$storage.getObj('crossObj');
                    for (var o in obj) {
                        if (o == 'linename') {
                            this.ruleForm.linename = obj[o];
                            this.ro.linename = true;
                            continue;
                        }
                        if (o == 'lineimage') {
                            this.ruleForm.lineimage = obj[o];
                            this.ro.lineimage = true;
                            continue;
                        }
                        if (o == 'routetype') {
                            this.ruleForm.routetype = obj[o];
                            this.ro.routetype = true;
                            continue;
                        }
                        if (o == 'departureplace') {
                            this.ruleForm.departureplace = obj[o];
                            this.ro.departureplace = true;
                            continue;
                        }
                        if (o == 'destination') {
                            this.ruleForm.destination = obj[o];
                            this.ro.destination = true;
                            continue;
                        }
                        if (o == 'traveltime') {
                            this.ruleForm.traveltime = obj[o];
                            this.ro.traveltime = true;
                            continue;
                        }
                        if (o == 'traveldays') {
                            this.ruleForm.traveldays = obj[o];
                            this.ro.traveldays = true;
                            continue;
                        }
                        if (o == 'transportation') {
                            this.ruleForm.transportation = obj[o];
                            this.ro.transportation = true;
                            continue;
                        }
                        if (o == 'routeattraction') {
                            this.ruleForm.routeattraction = obj[o];
                            this.ro.routeattraction = true;
                            continue;
                        }
                        if (o == 'details') {
                            this.ruleForm.details = obj[o];
                            this.ro.details = true;
                            continue;
                        }
                        if (o == 'releasedate') {
                            this.ruleForm.releasedate = obj[o];
                            this.ro.releasedate = true;
                            continue;
                        }
                    }


                }


                // 获取用户信息
                this.$http({
                    url: `${this.$storage.get('sessionTable')}/session`,
                    method: "get"
                }).then(({data}) => {
                    if (data && data.code === 0) {

                        var json = data.data;


						if(((json.account!=''&&json.account) || json.account==0) && this.$storage.get("role")!="管理员"){
							this.ruleForm.account = json.account
							this.ro.account = true;
						}
						if(((json.name!=''&&json.name) || json.name==0) && this.$storage.get("role")!="管理员"){
							this.ruleForm.name = json.name
							this.ro.name = true;
						}
                    } else {
                        this.$message.error(data.msg);
                    }
                });

                this.$http({
                    url: `option/linetype/routetype`,
                    method: "get"
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.routetypeOptions = data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                });
                this.traveltimeOptions = "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,新年".split(',')
                this.traveldaysOptions = "3天及以下,4天至7天,8天至14天,14天至20天,20天以上".split(',')
                this.transportationOptions = "高铁,出租车,自行车,飞机,火车,汽车,徒步".split(',')
                this.$http({
                    url: `option/attractioninformation/attractionname`,
                    method: "get"
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.routeattractionOptions = data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                });

            },
            // 多级联动参数

            info(id) {
                this.$http({
                    url: `xianluyuding/info/${id}`,
                    method: "get"
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.ruleForm = data.data;
                        //解决前台上传图片后台不显示的问题
                        let reg = new RegExp('../../../upload', 'g')//g代表全部
                        this.ruleForm.routeattraction = this.ruleForm.routeattraction.split(",");
                        this.ruleForm.details = this.ruleForm.details.replace(reg, '../../../luohelvyou/upload');
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            },


            // 提交
            onSubmit() {


                if (this.ruleForm.lineimage != null) {
                    this.ruleForm.lineimage = this.ruleForm.lineimage.replace(new RegExp(this.$base.url, "g"), "");
                }


                var objcross = this.$storage.getObj('crossObj');

                //更新跨表属性
                var crossuserid;
                var crossrefid;
                var crossoptnum;
                if (this.type == 'cross') {
                    var statusColumnName = this.$storage.get('statusColumnName');
                    var statusColumnValue = this.$storage.get('statusColumnValue');
                    if (statusColumnName != '') {
                        var obj = this.$storage.getObj('crossObj');
                        if (statusColumnName && !statusColumnName.startsWith("[")) {
                            for (var o in obj) {
                                if (o == statusColumnName) {
                                    obj[o] = statusColumnValue;
                                }
                            }
                            var table = this.$storage.get('crossTable');
                            this.$http({
                                url: `${table}/update`,
                                method: "post",
                                data: obj
                            }).then(({data}) => {
                            });
                        } else {
                            crossuserid = this.$storage.get('userid');
                            crossrefid = obj['id'];
                            crossoptnum = this.$storage.get('statusColumnName');
                            crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
                        }
                    }
                }
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        if (crossrefid && crossuserid) {
                            this.ruleForm.crossuserid = crossuserid;
                            this.ruleForm.crossrefid = crossrefid;
                            let params = {
                                page: 1,
                                limit: 10,
                                crossuserid: this.ruleForm.crossuserid,
                                crossrefid: this.ruleForm.crossrefid,
                            }
                            this.$http({
                                url: "xianluyuding/page",
                                method: "get",
                                params: params
                            }).then(({
                                         data
                                     }) => {
                                if (data && data.code === 0) {
                                    if (data.data.total >= crossoptnum) {
                                        this.$message.error(this.$storage.get('tips'));
                                        return false;
                                    } else {
                                        this.$http({
                                            url: `xianluyuding/${!this.ruleForm.id ? "save" : "update"}`,
                                            method: "post",
                                            data: this.ruleForm
                                        }).then(({data}) => {
                                            if (data && data.code === 0) {
                                                this.$message({
                                                    message: "操作成功",
                                                    type: "success",
                                                    duration: 1500,
                                                    onClose: () => {
                                                        this.parent.showFlag = true;
                                                        this.parent.addOrUpdateFlag = false;
                                                        this.parent.xianluyudingCrossAddOrUpdateFlag = false;
                                                        this.parent.search();
                                                        this.parent.contentStyleChange();
                                                    }
                                                });
                                            } else {
                                                this.$message.error(data.msg);
                                            }
                                        });

                                    }
                                } else {
                                }
                            });
                        } else {
                            this.ruleForm.routeattraction = this.ruleForm.routeattraction.join(",");
                            this.$http({
                                url: `xianluyuding/${!this.ruleForm.id ? "save" : "update"}`,
                                method: "post",
                                data: this.ruleForm
                            }).then(({data}) => {
                                if (data && data.code === 0) {
                                    this.$message({
                                        message: "操作成功",
                                        type: "success",
                                        duration: 1500,
                                        onClose: () => {
                                            this.parent.showFlag = true;
                                            this.parent.addOrUpdateFlag = false;
                                            this.parent.xianluyudingCrossAddOrUpdateFlag = false;
                                            this.parent.search();
                                            this.parent.contentStyleChange();
                                        }
                                    });
                                } else {
                                    this.$message.error(data.msg);
                                }
                            });
                        }
                    }
                });
            },
            // 获取uuid
            getUUID() {
                return new Date().getTime();
            },
            // 返回
            back() {
                this.parent.showFlag = true;
                this.parent.addOrUpdateFlag = false;
                this.parent.xianluyudingCrossAddOrUpdateFlag = false;
                this.parent.contentStyleChange();
            },
            lineimageUploadChange(fileUrls) {
                this.ruleForm.lineimage = fileUrls;
            },
        }
    };
</script>
<style lang="scss" scoped>
    .amap-wrapper {
        width: 100%;
        height: 500px;
    }

    .search-box {
        position: absolute;
    }

    .el-date-editor.el-input {
        width: auto;
    }

    .add-update-preview .el-form-item /deep/ .el-form-item__label {
        padding: 0 10px 0 0;
        color: #333;
        font-weight: 500;
        width: 140px;
        font-size: 14px;
        line-height: 40px;
        text-align: right;
    }

    .add-update-preview .el-form-item /deep/ .el-form-item__content {
        margin-left: 140px;
    }

    .add-update-preview .el-input /deep/ .el-input__inner {
        border: 2px solid #797979;
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #333;
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-select /deep/ .el-input__inner {
        border: 2px solid #797979;
        border-radius: 4px;
        padding: 0 10px;
        outline: none;
        color: #333;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-date-editor /deep/ .el-input__inner {
        border: 2px solid #797979;
        border-radius: 4px;
        padding: 0 10px 0 30px;
        outline: none;
        color: #333;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview /deep/ .el-upload--picture-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        width: auto;
        height: auto;
        line-height: initial;
        vertical-align: middle;
    }

    .add-update-preview /deep/ .upload .upload-img {
        border: 2px dashed #797979;
        cursor: pointer;
        border-radius: 6px;
        color: #797979;
        width: 150px;
        font-size: 32px;
        line-height: 100px;
        text-align: center;
        height: 100px;
    }

    .add-update-preview /deep/ .el-upload-list .el-upload-list__item {
        border: 2px dashed #797979;
        cursor: pointer;
        border-radius: 6px;
        color: #797979;
        width: 150px;
        font-size: 32px;
        line-height: 100px;
        text-align: center;
        height: 100px;
    }

    .add-update-preview /deep/ .el-upload .el-icon-plus {
        border: 2px dashed #797979;
        cursor: pointer;
        border-radius: 6px;
        color: #797979;
        width: 150px;
        font-size: 32px;
        line-height: 100px;
        text-align: center;
        height: 100px;
    }

    .add-update-preview .el-textarea /deep/ .el-textarea__inner {
        border: 2px solid #797979;
        border-radius: 4px;
        padding: 12px;
        outline: none;
        color: #333;
        width: 400px;
        font-size: 14px;
        min-height: 120px;
        height: auto;
    }
</style>
